import { defineConfig, loadEnv } from 'vite'
import createVitePlugins from './vite'
import postCssPxToRem from 'postcss-pxtorem'
import path from 'path'
import autoprefixer from 'autoprefixer'


// https://vitejs.dev/config/
export default defineConfig(({mode, command}) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env

  return {
    // 部署路径
    base: VITE_APP_ENV === 'development' ? '/' : '/h5',
    plugins: createVitePlugins(env, command === 'build'),
    resolve: {
      alias: {
        // 设置路径
        '~': path.resolve(__dirname, './'),
        // 设置别名
        '@': path.resolve(__dirname, './src')
      },
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
    },
    css: {
      postcss: {
        plugins: [
          autoprefixer(),
          postCssPxToRem({
            rootValue: 37.5, // 根据你的设计稿来调整这个值，例如，如果设计稿宽度是750px，则rootValue应为750/20=37.5
            propList: ['*'], // 转换所有可以转换的属性
            minPixelValue: 1, // 只转换最小值大于等于1px的属性
            mediaQuery: false, // 是否转换媒体查询中的单位
            replace: true, // 是否直接替换属性值，而不是添加备用属性
            unitPrecision: 5, // 单位转换后的精度
            exclude: /node_modules/i, // 排除 node_modules 目录下的样式
          }),
        ],
      },
    },
    server: {
      port: 8086,
      host: true,
      open: true,
      proxy: {
        '/dev-api': {
          target: 'https://thinkshop.zkthink.com/stage-api',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        }
      }
    },
  }
})
